<template>
  <el-form class="E-box-login">
    <div class="wrap-input">
      <el-input v-model="form.user_name" placeholder="手机号、邮箱">
        <i slot="prefix" class="el-input__icon el-icon-user" />
      </el-input>
      <el-input class="wrap-span" v-model="form.user_password" placeholder="请输入密码" type="password">
        <i slot="prefix" class="el-input__icon el-icon-lock" />
        <span @click="$emit('openReset')" slot="suffix" class="btn-span el-input__icon">重置密码</span>
      </el-input>
    </div>
    <p class="wrap-conf">
      <el-checkbox v-model="autologon">自动登陆</el-checkbox>
      <span @click="$message('该功能暂未开放，敬请期待 ~')" class="btn btn-right">验证码登陆</span>
    </p>
    <div class="wrap-btn">
      <el-button type="primary" @click="submitForm(form)" :loading="load">登录</el-button>
      <el-button @click="$emit('openRegister')">注册</el-button>
    </div>
  </el-form>
</template>

<script>
export default {
  props: ['tcp'],
  data() {
    return {
      autologon: true,
      load: false,
      form: {
        user_name: '',
        user_password: ''
      }
    };
  },
  methods: {
    submitForm(formData) {
      if (!this.tcp) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '请勾选同意 《服务条款》、《隐私政策》'
        });
        return;
      }
      // eslint-disable-next-line camelcase
      const reg_phone = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/;
      // eslint-disable-next-line camelcase
      const reg_email = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
      let loginMethod = null;
      if (reg_phone.test(formData.user_name)) {
        // 手机号
        loginMethod = 'phone';
      } else if (reg_email.test(formData.user_name)) {
        // 邮箱
        loginMethod = 'email';
      } else {
        // 什么也不是
        this.$message({
          showClose: true,
          type: 'warning',
          message: '手机号或邮箱 不符合规范'
        });
        return;
      }
      if (formData.user_password.length < 6 || formData.user_password.length > 16) {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '密码6~16位，并且不能为空'
        });
        return;
      }
      // eslint-disable-next-line camelcase
      const { user_name, user_password } = formData;
      this.load = true;
      if (loginMethod === 'phone') {
        // 通过手机号登陆
        this.disposeData(this.$api.post('login_cellphone', { phone: user_name, password: user_password }));
      } else {
        // 通过邮箱登陆
        this.disposeData(this.$api.post('login_email', { email: user_name, password: user_password }));
      }
    },
    disposeData(oP) {
      oP.then((data) => {
        if (data.code !== 200) {
          this.$message({
            showClose: true,
            type: 'error',
            message: data.message
          });
          return;
        }
        // 登陆成功
        this.$message({
          showClose: true,
          type: 'success',
          message: '登陆成功'
        });
        this.$emit('logined', data);
      }).finally(() => { this.load = false; });
    }
  }
};
</script>

<style lang="scss">
.E-box-login {
  & > .wrap-input {
    & > .el-input {
      & > input {
        border-radius: 0;
        border-bottom-width: 0;
        &:focus {
          border-color: #dcdfe6;
        }
        &:hover {
          border-color: #dcdfe6;
        }
      }
      &:first-of-type {
        & > input {
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
        }
      }
      &:last-of-type {
        & > input {
          border-bottom-width: 1px;
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
        }
      }
      &.wrap-span {
        & > input {
          padding-right: 70px;
        }
        .btn-span {
          display: inline-block;
          cursor: pointer;
          width: 60px;
          color: #606266;
          &:not(.await):hover {
            color: #000;
          }
        }
      }
    }
  }
  & > .wrap-conf {
    line-height: 34px;
    padding: 0 5px;
    & > .btn {
      cursor: pointer;
      &:hover {
        color: #000;
      }
    }
    & > .btn-right {
      float: right;
    }
  }
  & > .wrap-btn {
    margin-bottom: 20px;
    & > .el-button {
      display: block;
      width: 100%;
      margin: 0;
      margin-bottom: 8px;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}
</style>
